import { defineComponent, onMounted, reactive } from "vue";
import styles from './orderSearch.module.scss';
import { useRouter } from "vue-router";
import { $getCaptcha, $orderSearch } from "@/api/api";
import { useStore as useUserStore } from "@/store/user";
import useSmsSearch from "@/hooks/useSmsSearch";
import { showToast } from "@nutui/nutui";

export default defineComponent({
  setup() {
    const router = useRouter();
    const userStore = useUserStore();
    const smsSearch = useSmsSearch();
    const state = reactive({
      form: {
        type: 1,  //查询类型
        name: '', //姓名
        id_no: '',  //证件号
        mobile: '', //手机号
        captcha: '',  //图形验证码
        capt_sign: '',
      },
      img: '',
    })
    //获取图形验证码
    const getCaptcha = () => {
      $getCaptcha({}).then((res: any) => {
        state.img = res.data?.img || '';
        state.form.capt_sign = res.data?.sign || '';
      })
    }

    //查询
    const search = () => {
      if(Number(state.form.type) === 1 && !state.form.mobile){
        showToast.text("请输入手机号");
        return;
      }
      $orderSearch(state.form).then((res: any) => {
        if (Number(res.code) === 200) {
          userStore.setLoginInfo({
            token: res.data.token || '',
          });
          router.push('/orderSearchList')
        }
      })
    }

    onMounted(() => {
      getCaptcha();
    })

    return () => (
      <div class={styles.index}>
        <img src={require('@/assets/image/orderSearchBg.jpg')} />
        <div class={styles.container}>
          <div class={styles.form}>
            <div class={styles['form-row']}>
              <div class={styles['form-label']}>查询类型</div>
              <div class={styles['form-value']}>
                <nut-radio-group v-model={state.form.type} direction="horizontal" class={styles.radio}>
                  <nut-radio label={1}>个单</nut-radio>
                  <nut-radio label={2}>团单</nut-radio>
                </nut-radio-group>
              </div>
            </div>
            <div class={styles['form-row']}>
              <div class={styles['form-label']}>姓名</div>
              <div class={styles['form-value']}>
                <input placeholder="请输入被保人姓名" v-model={state.form.name} />
              </div>
            </div>
            <div class={styles['form-row']}>
              <div class={styles['form-label']}>证件号码</div>
              <div class={styles['form-value']}>
                <input placeholder="请输入被保人证件号码" v-model={state.form.id_no} maxlength={18} />
              </div>
            </div>
            {
              Number(state.form.type) === 1 && <>
                <div class={styles['form-row']}>
                  <div class={styles['form-label']}>手机号</div>
                  <div class={styles['form-value']}>
                    <input placeholder="请输入投保人手机号" v-model={state.form.mobile} maxlength={11} />
                  </div>
                </div>
              </>
            }
            <div class={styles['form-row']}>
              <div class={styles['form-label']}>验证码</div>
              <div class={styles['form-value']}>
                <input placeholder="请输入图形验证码" v-model={state.form.captcha} />
                <div class={styles['captcha']} onClick={() => { getCaptcha() }}>
                  <img src={state.img} />
                </div>
              </div>
            </div>
            {/* <div class={styles['form-row']}>
              <div class={styles['form-label']}>动态码</div>
              <div class={styles['form-value']}>
                <input placeholder="请输入手机动态码" v-model={state.form.dynacode}/>
                <div class={styles['dynacode-btn']} onClick={() => { smsSearch.sendSms(state.form.mobile) }}>{smsSearch.show_text.value}</div>
              </div>
            </div> */}
            <div class={styles.btn} onClick={() => { search() }}>查询</div>
          </div>
        </div>
      </div>
    )
  }
})